<!-- KtButton页面 -->
<template>
  <el-button
    :size="size"
    :type="type"
    :plain="plain"
    :round="round"
    :icon="icon"
    :loading="loading"
    :disabled="!hasPerms(perms)"
    @click="handleClick">
    {{ label }}
  </el-button>
</template>

<script>
  import { hasPermission } from "@/utils/permission.js"

  export default {
    name: "KtButton",
    props: {
      label: {     //按钮显示文本
        type: String,
        default: ""
      },
      size: {      //按钮尺寸
        type: String,
        default: ""
      },
      type: {      //按钮类型
        type: String,
        default: null
      },
      plain: {      //按钮镂空
        type: Boolean,
        default: false
      },
      round: {      //按钮圆角
        type: Boolean,
        default: false
      },
      icon: {      //按钮图标
        type: String,
        default: ""
      },
      loading: {      //按钮加载状态
        type: Boolean,
        default: false
      },
      perms: {        //按钮权限标识，外部使用者传入
        type: String,
        default: null
      },
      disabled: {     //按钮是否禁用
        type: Boolean,
        default: false
      }
    },
    data() {
      return {}
    },
    methods: {
      //按钮事件
      handleClick() {
        this.$emit("click", {})
      },
      //是否禁用的函数
      hasPerms(perms) {
        return hasPermission(perms) & !this.$props.disabled
      }
    }
  }
</script>
